
import { Form, Input } from 'antd'
import { useState, useEffect } from 'preact/hooks'
import Panel from './common/Panel'

export default function Index({ info, servers, external, tags, segment }: {
    info: {
        title: string,
        description: string,
        version: string,
        contact: {
            name: string, url: string, email: string, phone: string
        },
        license: {
            name: string, url: string
        }
    } | null,
    servers: Array<{ url: string, description: string }>,
    external: {} | null,
    tags: Array<{ name: string, description: string }>,
    segment: string

}) {
    const [form] = Form.useForm();

    useEffect(() => {
        if (info) {
            console.log(info);
            form.setFieldsValue({
                title: info.title,
                version: info.version,
                description: info.description,
                contactName: info.contact.name,
                contactUrl: info.contact.url,
                contactEmail: info.contact.email,
                contactPhone: info.contact.phone,
                licenseName: info.license.name,
                licenseUrl: info.license.url
            });
        }
    }, [info, form]);

    if (!info) {
        return <div>No API Endpoints available</div>;
    }
    const [isReadOnly, setReadOnly] = useState<boolean>(true);
    setReadOnly(segment != 'form')
    return (
        <div className="api-title">

            <Form
                form={form}
                layout="horizontal"
                variant={isReadOnly ? "underlined" : "outlined"}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                style={{ minWidth: 800 }}

            >
                <Panel label="API">
                    <Form.Item label="API Title" name="title">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>
                    <Form.Item label="API Version" name="version">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>
                    <Form.Item
                        label="Description"
                        name="description"
                        rules={[{ required: true, message: 'Please input!' }]}
                    >
                        <Input.TextArea readOnly={isReadOnly} />
                    </Form.Item>
                </Panel>
                <Panel label="Contact">

                    <Form.Item label="Contact Name" name="contactName">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>

                    <Form.Item label="Contact URL" name="contactUrl">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>

                    <Form.Item label="Contact Email" name="contactEmail">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>

                    <Form.Item label="Contact Phone" name="contactPhone">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>

                </Panel>
                <Panel label="License">
                    <Form.Item label="License Name" name="licenseName">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>

                    <Form.Item label="License Url" name="licenseUrl">
                        <Input readOnly={isReadOnly} />
                    </Form.Item>
                </Panel>

            </Form>
        </div>
    )
}
